/* 注册自定义节点 */
import { fittingString } from '@/modules/topology/utils';

export default G6 => {
    //节点类型颜色
    const nodeType2Color = {
      biz: "#3056E3",
      set: "#EF9F1F",
      service: "#BD10E0",
      server: "#008000",
      volume: "#F6C3B7",
      router: "#B6E3F5",
      subnet: '#D3C6EA',
      network: '#FFD8B8',
      floatip: "#D3C6EA",
      loadbalance: '#AAD8D8',
      networkcard: '#FFD6E7',
      security_group: '#0de179',
    };

  G6.registerNode('tree-node', {
      drawShape: function drawShape(cfg, group) {
          let fillColor = nodeType2Color[cfg?.moduleCode] || '#F6C3B7';
          let fillItemColor = '#333';
          const r = 2;
          const rect = group.addShape('rect', {
              attrs: {
                  x: 0,
                  y: 0,
                  width:120,
                  height: 42,
                  stroke: fillColor,
                  fill: '#ffffff',
                  radius: r,
              },
              name: 'rect-shape',
              draggable: true,
          });
          group.addShape('rect', {
            attrs: {
              x: 0,
              y: 0,
              width: 120,
              height: 20,
              fill: fillColor,
              radius: [r, r, 0, 0],
            },
            name: 'title-box',
            draggable: true,
          });
    
          group.addShape('text', {//左侧图标
            attrs: {
              x: 4,
              y: 16,
              height: 16,
              width: 16,
              fontFamily: 'iconfont',
              text: cfg?.moduleIcon,
              fill: '#fff',
              fontSize: 14,
              cursor: 'pointer',
            },
            draggable: true,
            name: 'node-icon'
          });
    
          group.addShape('text', {// 模型名称
            attrs: {
              textBaseline: 'top',
              x: 24,
              y: 2,
              lineHeight: 20,
              text: fittingString(cfg?.moduleName, 118),
              fill: '#fff',
              fontSize: 14,
              cursor: 'pointer',
            },
            draggable: true,
            name: 'title',
          });

          group.addShape('text', {
              attrs: {
                  textBaseline: 'top',
                  y: 23,
                  x: 4,
                  lineHeight: 20,
                  text: fittingString(cfg.name, 120, 16),
                  fill: fillItemColor,
                  fontSize: 14,
                  cursor: 'pointer',
              },
              draggable: true,
              name: 'text-shape',
          });

          const bbox = rect.getBBox();
          // const hasChildren = cfg.childrenCount > 0 || (cfg.children && cfg.children.length > 0);

          if(cfg.associate) {
              group.addShape('text', {
                  attrs: {
                      textBaseline: 'top',
                      x: -50,
                      y: 0,
                      lineHeight: 20,
                      text: cfg.associate,
                      fill: '#333',
                  },
                  name: 'associate',
              });
          }

          // if (hasChildren ) {
          //     group.addShape('marker', {
          //         attrs: {
          //             x: bbox.width + 6,
          //             y: bbox.height / 2 - 0,
          //             r: 6,
          //             symbol:
          //                 cfg.isLoadingChildren ? G6.Marker.expand :
          //                 cfg.collapsed ? G6.Marker.expand : G6.Marker.collapse,
          //             stroke: '#666',
          //             lineWidth: 1,
          //         },
          //         name: 'collapse-icon',
          //     });
          // }
          return rect;
      },
      update: (cfg, item) => {
          const group = item.getContainer();
          const icon = group.find((e) => e.get('name') === 'collapse-icon');
          if(icon)
          icon.attr('symbol', cfg.collapsed ? G6.Marker.expand : G6.Marker.collapse);
      },
  }, 'single-node');
};
